<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

   <div id="app"></div>
   <script src="../js/react.development.js"></script>
   <script src="../js/react-dom.development.js"></script>
   <script src="../js/babel.min.js"></script>


    <script type="text/babel">
        // 1 需求：展示学校信息 school - class - teacher/students
        
        // 2 请求数据
        let data = {
            school:{
                name:'一中',
                classes:[
                    {
                        name:'一班',
                        teacher:'Mr.wang',
                        students:[
                            {
                                name:'s1',
                                gender:0,
                                age:18
                            },
                            {
                                name:'s2',
                                gender:1,
                                age:18
                            },
                            {
                                name:'s3',
                                gender:1,
                                age:18
                            },
                        ]
                    },
                    {
                        name:'二班',
                        teacher:'Mr.zhang',
                        students:[
                            {
                                name:'s4',
                                gender:0,
                                age:18
                            },
                            {
                                name:'s5',
                                gender:1,
                                age:18
                            },
                            {
                                name:'s6',
                                gender:1,
                                age:18
                            },
                        ]
                    },
                    {
                        name:'三班',
                        teacher:'Mr.li',
                        students:[
                            {
                                name:'s7',
                                gender:0,
                                age:18
                            },
                            {
                                name:'s8',
                                gender:1,
                                age:18
                            },
                            {
                                name:'s9',
                                gender:1,
                                age:18
                            },
                        ]
                    },
                ]
            }
        }
        
        // 3 定义组件（组件及关系）
        // 1)定义几个组件 
        // 2) 组件关系 
        // 3) 根组件传入数据
        // 4）组件树=>数据流=>子组件数据显示
        function Student(props){
            console.log(props);
            const {name,gender,age} = props.student
            return <div>
                <h2>学生</h2>
                <div>name:{name}</div>
                <div>genger:{gender}</div>
                <div>age:{age}</div>
                </div>
        }

        function Teacher(props){
            const name= props.teacher
            return <div>teacher:{name}</div>
        }

        // <Student student={students[0]}></Student>
        // <Student student={students[1]}></Student>
        // <Student student={students[2]}></Student>
        function Class(props){
            // console.log(props)
            const  {name,teacher,students} = props.class
            return <div>
                    <h2>班级</h2>
                    <h2>{name}</h2>
                    <Teacher teacher={teacher}></Teacher>
                    {
                        students.map((item,index)=>{
                            return <Student student={item} key={index}></Student>
                        })
                    }
                   </div>
        }

        // <Class class={classes[0]}></Class>
        // <Class class={classes[1]}></Class>
        // <Class class={classes[2]}></Class>

        function School(props){
            const {name,classes} = props.school
            return <div>
                    <h2>{name}</h2>
                    {
                        classes.map((item,index)=>{
                            // jsx=>element 函数中：参数 ，返回值 ，内部定义
                            return <Class class={item} key={index}></Class>
                        })
                    }
                   </div>

        }


        //根组件定义
         const e = <School  school={data.school}></School>

        ReactDOM.render(e,document.getElementById('app'))


        // 组件树 (props=>单向数据流)
        // School
        // Class                                Class
        // Teactcher Student Student Student    Teactcher Student Student Student



    </script>
</body>
</html>